84:I[903690,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"ExplicitChatIdProvider"] 85:I[838238,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2lo4wuedhi-j3.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/39x5wlubw1qy9.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"SWRDataProvider"] 86:T35f9,[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import ClerkCookie from "@/components/clerk-cookie" export default function Home() { return (

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "three": "0.180.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/clerk-cookie.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useEffect, useRef, useCallback } from "react" import * as THREE from "three" const VERTEX_SHADER = ` varying vec3 vNormal; varying vec3 vPosition; void main() { vNormal = normalize(normalMatrix * normal); vPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ` const FRAGMENT_SHADER = ` uniform float time; uniform vec3 color; uniform vec3 glowColor; varying vec3 vNormal; varying vec3 vPosition; void main() { // Fresnel effect for glow vec3 viewDirection = normalize(cameraPosition - vPosition); float fresnel = 1.0 - dot(viewDirection, vNormal); fresnel = pow(fresnel, 20.0); // Base color vec3 finalColor = color; // Add glow finalColor += glowColor * fresnel * 20.0; // Add some flicker // float flicker = sin(time * 10.0) * 0.1 + 0.9; // finalColor *= flicker; // gl_FragColor is the built-in GLSL variable that sets the final pixel color // vec4(r, g, b, alpha) - RGB values and alpha transparency (1.0 = fully opaque) gl_FragColor = vec4(finalColor, 1.0); } ` export default function ClerkCookie() { const canvasRef = useRef(null) const rendererRef = useRef(null) const animationFrameRef = useRef(null) const autoRotateRef = useRef(true) const interactionTimeoutRef = useRef | null>(null) // Simple orbit control state using spherical coordinates const sphericalRef = useRef({ radius: 5, theta: Math.PI / 4, phi: Math.PI / 2, }) const startRef = useRef({ theta: sphericalRef.current.theta, phi: sphericalRef.current.phi, radius: sphericalRef.current.radius, x: 0, y: 0, pinchDist: 0, }) const cameraRef = useRef(null) const sceneRef = useRef(null) const isDraggingRef = useRef(false) const isPinchingRef = useRef(false) // Helper to compute distance between two touches const getPinchDistance = (touches: TouchList) => { if (touches.length < 2) return 0 const [a, b] = Array.from(touches) const dx = a.clientX - b.clientX const dy = a.clientY - b.clientY return Math.hypot(dx, dy) } // Register interaction to pause auto-rotation const registerInteraction = useCallback(() => { autoRotateRef.current = false if (interactionTimeoutRef.current) { clearTimeout(interactionTimeoutRef.current) } interactionTimeoutRef.current = setTimeout(() => { autoRotateRef.current = true }, 2000) }, []) // Mouse event handlers const handleMouseDown = useCallback( (event: React.MouseEvent) => { registerInteraction() isDraggingRef.current = true const s = sphericalRef.current startRef.current = { theta: s.theta, phi: s.phi, radius: s.radius, x: event.clientX, y: event.clientY, pinchDist: 0, } }, [registerInteraction], ) const handleMouseMove = useCallback( (event: React.MouseEvent) => { if (!isDraggingRef.current) return registerInteraction() const ROT_SPEED = 0.005 const dx = event.clientX - startRef.current.x const dy = event.clientY - startRef.current.y const nextTheta = startRef.current.theta - dx * ROT_SPEED let nextPhi = startRef.current.phi - dy * ROT_SPEED // Clamp phi to avoid flipping over the poles const EPS = 0.001 nextPhi = Math.max(EPS, Math.min(Math.PI - EPS, nextPhi)) sphericalRef.current.theta = nextTheta sphericalRef.current.phi = nextPhi }, [registerInteraction], ) const handleMouseUp = useCallback(() => { isDraggingRef.current = false registerInteraction() }, [registerInteraction]) const handleMouseLeave = useCallback(() => { isDraggingRef.current = false // Don't call registerInteraction() here to avoid pausing auto-rotation }, []) const handleWheel = useCallback( (event: React.WheelEvent) => { registerInteraction() const ZOOM_SPEED = 0.001 const delta = event.deltaY const nextRadius = Math.max(1.5, Math.min(20, sphericalRef.current.radius + delta * ZOOM_SPEED)) sphericalRef.current.radius = nextRadius }, [registerInteraction], ) // Touch event handlers const handleTouchStart = useCallback( (event: React.TouchEvent) => { registerInteraction() const touches = event.touches if (touches.length === 1) { isDraggingRef.current = true const s = sphericalRef.current startRef.current = { theta: s.theta, phi: s.phi, radius: s.radius, x: touches[0].clientX, y: touches[0].clientY, pinchDist: 0, } } else if (touches.length === 2) { isPinchingRef.current = true isDraggingRef.current = false const dist = getPinchDistance(touches) startRef.current = { ...startRef.current, pinchDist: dist, radius: sphericalRef.current.radius, } } }, [registerInteraction], ) const handleTouchMove = useCallback( (event: React.TouchEvent) => { event.preventDefault() registerInteraction() const touches = event.touches const ROT_SPEED = 0.005 const ZOOM_SPEED = 0.01 if (touches.length === 2 && isPinchingRef.current) { // Pinch to zoom const dist = getPinchDistance(touches) if (startRef.current.pinchDist > 0 && dist > 0) { const delta = startRef.current.pinchDist - dist const nextRadius = Math.max(1.5, Math.min(20, startRef.current.radius + delta * ZOOM_SPEED)) sphericalRef.current.radius = nextRadius } } else if (touches.length === 1 && isDraggingRef.current) { // Single finger orbit const dx = touches[0].clientX - startRef.current.x const dy = touches[0].clientY - startRef.current.y const nextTheta = startRef.current.theta - dx * ROT_SPEED let nextPhi = startRef.current.phi - dy * ROT_SPEED const EPS = 0.001 nextPhi = Math.max(EPS, Math.min(Math.PI - EPS, nextPhi)) sphericalRef.current.theta = nextTheta sphericalRef.current.phi = nextPhi } }, [registerInteraction], ) const handleTouchEnd = useCallback(() => { isDraggingRef.current = false isPinchingRef.current = false registerInteraction() }, [registerInteraction]) useEffect(() => { const canvas = canvasRef.current if (!canvas) return // Create renderer const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }) renderer.setSize(canvas.clientWidth, canvas.clientHeight) renderer.setClearColor(0x000000, 1) rendererRef.current = renderer // Create scene const scene = new THREE.Scene() sceneRef.current = scene // Create camera const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000) camera.position.z = sphericalRef.current.radius cameraRef.current = camera // Create long segment (light purple) const longSegmentGeometry = new THREE.TorusGeometry(1.2, 0.35, 30, 200, Math.PI * 1) const longSegmentMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, color: { value: new THREE.Color(0xbab1ff) }, glowColor: { value: new THREE.Color(0xffff00) }, }, vertexShader: VERTEX_SHADER, fragmentShader: FRAGMENT_SHADER, }) const longSegment = new THREE.Mesh(longSegmentGeometry, longSegmentMaterial) longSegment.rotation.z = Math.PI * 0.21 scene.add(longSegment) // Create short segment (darker purple) const shortGeometry = new THREE.TorusGeometry(1.2, 0.35, 30, 200, Math.PI * 0.4) const shortSegmentMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, color: { value: new THREE.Color(0x6c47ff) }, glowColor: { value: new THREE.Color(0xffff00) }, }, vertexShader: VERTEX_SHADER, fragmentShader: FRAGMENT_SHADER, }) const shortSegment = new THREE.Mesh(shortGeometry, shortSegmentMaterial) shortSegment.rotation.z = Math.PI * 1.31 scene.add(shortSegment) // Create center circle const centerCircleGeometry = new THREE.SphereGeometry(0.5, 16, 16) const centerMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, color: { value: new THREE.Color(0x6c47ff) }, glowColor: { value: new THREE.Color(0xffff00) }, }, vertexShader: VERTEX_SHADER, fragmentShader: FRAGMENT_SHADER, }) const centerCircle = new THREE.Mesh(centerCircleGeometry, centerMaterial) scene.add(centerCircle) // Animation loop const animate = () => { animationFrameRef.current = requestAnimationFrame(animate) // Update time uniforms for shader animation longSegmentMaterial.uniforms.time.value += 0.016 shortSegmentMaterial.uniforms.time.value += 0.016 centerMaterial.uniforms.time.value += 0.016 // Auto-rotate when not interacting if (autoRotateRef.current) { longSegment.rotation.y += 0.01 shortSegment.rotation.y += 0.01 centerCircle.rotation.y += 0.01 } // Update camera from spherical controls const { radius, theta, phi } = sphericalRef.current const x = radius * Math.sin(phi) * Math.sin(theta) const y = radius * Math.cos(phi) const z = radius * Math.sin(phi) * Math.cos(theta) camera.position.set(x, y, z) camera.lookAt(new THREE.Vector3(0, 0, 0)) renderer.render(scene, camera) } animate() // Handle resize const handleResize = () => { if (!canvas || !renderer || !camera) return const width = canvas.clientWidth const height = canvas.clientHeight renderer.setSize(width, height) ;(camera as THREE.PerspectiveCamera).aspect = width / height ;(camera as THREE.PerspectiveCamera).updateProjectionMatrix() } window.addEventListener("resize", handleResize) return () => { window.removeEventListener("resize", handleResize) if (animationFrameRef.current !== null) { cancelAnimationFrame(animationFrameRef.current) } if (interactionTimeoutRef.current) { clearTimeout(interactionTimeoutRef.current) } renderer.dispose() } }, []) return (

) }7c:["$","$L84",null,{"chatId":"kwgCDTeRY0q","children":["$","$L85",null,{"data":{"@\"active-block\",\"kwgCDTeRY0q\",":{"id":"b_2Wszd9jJuzz","messageId":"sGusBf9UrFjC67CLb1Ddz2q69nWmF0jY","source":"$86","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"neon-sign-web","type":"code-project","project":"neon-sign-web","taskNameActive":"Removing mouse leave pause","taskNameComplete":"Removed mouse leave pause"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"kwgCDTeRY0q\",":false,"":null},"children":"$L87"}]}]

About

Tags

Share

About

Tags

Share

More from thekevinwang

More Templates Like This